<template>
  <div class="app-inner">
    <div class="menu">
      <router-link class="menu-item" :class="{ current: tab === 'pinia' }" to="pinia">pinia</router-link>
      <router-link class="menu-item" :class="{ current: tab === 'vuex' }" to="vuex">vuex</router-link>
    </div>
    <div class="main-box">
      <router-view></router-view>
    </div>
    <!-- <div class="main-loading" v-show="sysStore.loading">
      <div class="loading-box"></div>
    </div> -->
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router'
  // import { useSysStore } from '@/store';
  // const sysStore = useSysStore();

  const route = useRoute();
  console.log({ ...route });
  const tab = ref('pinia');
</script>
<style lang="less">
  #app {
    height: 100%;
    .app-inner {
      height: 100%;
    }
    .menu {
      width: 100px;
      background: white;
      padding: 10px;
      box-sizing: border-box;
      position: fixed;
      height: 100%;
      top: 0;
      left: 0;
      .menu-item {
        display: block;
        font-weight: 400;
        margin: 10px 0;
        color: #566276;
        font-size: 14px;
        &.current {
          color: #4a52e9;
        }
      }
    }
    .main-box {
      padding-left: 100px;
      height: 100%;
      background: #d2daea;
      overflow-y: auto;
    }
  }
</style>
